<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <div>
     <h1>The Goods Page</h1>
      <table>
          <thead>
             <tr>
                 <th>id</th>
                 <th>name</th>
                 <th>remark</th>
                 <th>createdTime</th>
             </tr>
          </thead>
          <tbody>
             <tr><td colspan="4">Data is loading ....</td></tr>
          </tbody>
      </table>
  </div>
  <script>
      window.onload=function(){
          let url="goods/doFindGoods";
          let xhr=new XMLHttpRequest();
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4&&xhr.status==200){
                  let result=xhr.responseText;
                  doHandleQueryResponseResult(JSON.parse(result));
              }
          }
          xhr.open("Get",url,true);
          xhr.send(null);
      }
      function doHandleQueryResponseResult(data){//通过此函数处理服务端的响应结果
          //1.获取tbody对象,并清空原有内容.
           let tBody=document.querySelector("tbody");
           tBody.innerHTML="";
          //2.迭代服务端响应的数据(data),并将数据追加到tbody中(借助原生js进行实现)
           data.forEach(function(item){//循环一次取一行
              let tr=document.createElement("tr");//Node
              let td=document.createElement("td");
              td.innerText=item.id;
              tr.appendChild(td);

              td=document.createElement("td");
              td.innerText=item.name;
              tr.appendChild(td);

              td=document.createElement("td");
              td.innerText=item.remark;
              tr.appendChild(td);


              td=document.createElement("td");
              td.innerText=item.createdTime;
              tr.appendChild(td);

              tBody.appendChild(tr);
          });
      }
  </script>
</body>
</html>